import validate from '../../libs/validate';

const redeemEditBtn = (h, param, vm) => {
    return h('Button', {
        props: {
            type: "primary",
            icon: 'edit',
        },
        style: {
            'margin-right': '10px',
        },
        on: {
            click: () => {
                vm.selectVideo = param.row;
                vm.selectVideo._index = param.index;
                vm.videoCtrlForm.video_name = param.row.video_name;
                vm.fileUrl = param.row.file_url;
                vm.videoCtrlForm.access_privilege_uuid = param.row.access_privilege_uuid;
                vm.showModal = true;
            }
        }
    }, '编辑')
}
const redeemDeleteBtn = (h, param, vm) => {
    return h(
        "Poptip", {
            props: {
                confirm: true,
                title: "确定要删除这个视频?",
                transfer: true
            },
            on: {
                "on-ok": () => {
                    vm.deleteVideo(param.row)
                }
            }
        }, [
            h('Button', {
                class: 'refund-btn',
                props: {
                    type: "error",
                    icon: 'trash-b',
                },
                on: {
                    click: () => {

                    }
                }
            }, '删除')
        ]
    )
}

export default {
    computed: {
        user() {
            return this.$store.state.user.data
        }
    },
    data() {
        return {
            videoCtrlTableColumns: [{
                'title': '序号',
                'align': 'center',
                'type': 'index',
                'width': 70
            }, {
                'title': '名称',
                'align': 'center',
                'key': 'file_url',

            }, {
                'title': '创建时间',
                'align': 'center',
                'key': 'createtime',
            }, {
                'title': '操作',
                'align': 'center',
                'key': 'action',
                'action': true,
                'width': 200

            }],
            searchKey: '',
            pageCount: 0,
            pageNum: 1,
            pageLoading: false,
            showModal: false,
            modalLoading: true,
            videoCtrlList: [],
            selectVideo: '',
            fileUrl: '',
            uploadFileData: {},
            isUploading:false,
            uploadProgress:0,
            videoCtrlForm: {
                video_name: '',
                access_privilege_uuid:'34eae925ba6c4bcb9b9d7ae644d87920'
            },
            videoCtrlFormRules: {
                video_name: [{
                    required: true,
                    validator: validate.name,
                    trigger: 'blur'
                }],
            },
        }
    },
    methods: {
        /**
         * @param {Boolean} type
         * 设置确定按钮loading动画，传True或者False
         */
        changeLoadingStatus(type) {
            if (!type) {
                this.modalLoading = false;
            }
            this.$nextTick(() => {
                this.modalLoading = true;
            });
        },
        doSearch() {
            this.pageNum = 1;
            this.getVideoList();
        },
        clearSearch() {
            this.searchKey = '';
            this.pageNum = 1;
            this.getVideoList();
        },
        changePage(num) {
            this.pageNum = num;
            this.getVideoList();
            document.querySelector('.single-page-con').scrollTo(0, 0)
        },
        getVideoList() {
            if (this.pageLoading) return
            this.pageLoading = true;
            this.http.post(this.postUrl.doGetVideoList, {
                token: this.user.tokenList[0],
                pageNum: this.pageNum,
                pageSize: 20,
                key_word: this.searchKey
            }).then((data) => {
                console.log(data);
                if (data.code > -1) {
                    this.pageCount = data.data.totalRow;
                    this.videoCtrlList = JSON.parse(JSON.stringify(data.data.list));
                } else {
                    this.errorHandle(data.msg)
                }
            }, () => {
                this.errorHandle()
            }).then(() => {
                this.pageLoading = false;
            })
        },
        clickOK() {
            console.log(this.videoCtrlForm);
            this.changeLoadingStatus(true)
            if (!this.fileUrl) {
                this.changeLoadingStatus(false);
                this.errorHandle("请先上传视频！");
                return;
            }
            this.$refs.videoCtrlForm.validate(valid => {
                if (!valid) {
                    this.changeLoadingStatus(false)
                    return
                }
                let postData = JSON.parse(JSON.stringify(this.videoCtrlForm));
                postData.token = this.user.tokenList[0];
                postData.file_url = this.fileUrl;
                if (this.selectVideo) {
                    postData.uuid = this.selectVideo.uuid;
                }
                this.http.post(this.postUrl.addOrEditVideoUrl, postData).then((data) => {
                    if (data.code > -1) {
                        this.$Notice.success({
                            title: this.selectVideo ? '修改成功！' : '新增成功！'
                        })
                        this.showModal = false;
                        this.getVideoList();
                    } else {
                        this.errorHandle(data.msg)
                    }
                    this.changeLoadingStatus(false)

                }, () => {
                    this.errorHandle()
                    this.changeLoadingStatus(false)

                })

            })
        },
        deleteVideo(param) {
            this.http.post(this.postUrl.doDeleteVideo, {
                token: this.user.tokenList[0],
                uuid: param.uuid
            }).then((data) => {
                if (data.code > -1) {
                    this.$Notice.success({
                        title: '操作成功！',
                    })
                    this.getVideoList()
                } else {
                    this.errorHandle(data.msg)
                }
            }, () => {
                this.errorHandle()
            })
        },
        uploadSuccess(data) {
            if (data.code > -1) {
                this.fileUrl = data.data;
            } else {
                this.errorHandle(data.msg);
            }
            this.isUploading = false;
        },
        uploadError(e) {
            console.log("error", e);
            this.isUploading = false;
            this.errorHandle();
        },
        beforeUpload() {
            this.uploadProgress = 0;
            this.isUploading = true;
            return true;
        },
        uploadProgressFunc(event) {
            this.uploadProgress = Math.round(event.percent);
        },
        handleFormatError() {
            this.isUploading = false;
            this.errorHandle("请选择正确的安装包文件！");
        },
        createFileUploadData() {
            //上传图片
            let uploadFileData = {
                token: this.user.tokenList[0],
                type: 1,
                app_key: this.http.app_key,
                timestamp: "2017-09-26 15:52:28"
            }
            let uploadFileDataSign = this.http.getSign({
                type: 1,
                token: this.user.tokenList[0]
            });
            uploadFileData.sign = uploadFileDataSign;
            this.uploadFileData = uploadFileData;
        },
    },
    created() {
        this.videoCtrlTableColumns.forEach(item => {
            if (item.key === 'file_url') {
                item.render = ((h, param) => {
                    return h('a', {
                        attrs: {
                            href: 'http://blvod.xinpingqihe.cn/' + param.row.file_url,
                            target: '_blank'

                        }
                    }, param.row.video_name)
                })
            }
            if (item.action) {
                item.render = (h, param) => {
                    return h('div', [
                        redeemEditBtn(h, param, this),
                        redeemDeleteBtn(h, param, this)
                    ])
                };

            }
        })
        if (this.user) {
            this.getVideoList()
            this.createFileUploadData()
        }
    },
    watch: {
        user(val, old) {
            if (!old && val) {
                this.getVideoList()
                this.createFileUploadData()

            }
        },
        showModal(val) {
            if (!val) {
                setTimeout(() => {
                    this.videoCtrlForm = {
                        video_name: '',
                        access_privilege_uuid:'34eae925ba6c4bcb9b9d7ae644d87920'
                    }
                    this.fileUrl = '';
                }, 300)
            }
        }

    }
}
